<template>
  <div class="blog-page" @keydown="handleKeydown" tabindex="0" ref="pageRef">
    <!-- 彩蛋提示 -->
    <EasterEggHint :show="showEasterEgg" />

    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <SearchInput v-model="searchQuery" placeholder="搜索文章..." @search="handleSearch" />
      </div>
    </div>

    <!-- 分类筛选 -->
    <div class="category-filter">
      <div class="filter-tabs">
        <a-button
          v-for="category in categories"
          :key="category.id"
          :type="activeCategory === category.id ? 'primary' : 'default'"
          class="filter-tab"
          @click="setActiveCategory(category.id)"
        >
          {{ category.name }}
          <a-badge v-if="category.count > 0" :count="category.count" class="tab-badge" />
        </a-button>
      </div>
    </div>

    <!-- 文章列表 -->
    <div class="articles-container">
      <div class="articles-grid">
        <ArticleCard
          v-for="article in paginatedArticles"
          :key="article.id"
          :article="article"
          :category-color="getCategoryColor(article.category)"
          @click="viewArticle"
        />
      </div>

      <!-- 空状态 -->
      <a-empty v-if="!loading && paginatedArticles.length === 0" :image="simpleImage" description="暂无相关文章" class="custom-empty-dark" />
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <Pagination
        v-model:current="currentPage"
        hideOnSinglePage
        :total="totalArticles"
        :page-size="pageSize"
        :show-size-changer="false"
        :show-quick-jumper="false"
        :show-less-items="true"
        :show-total="(total, range) => `第 ${range[0]}-${range[1]} 篇，共 ${total} 篇`"
        class="custom-pagination"
        @change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Pagination, Empty } from 'ant-design-vue';
  import { useBlogArticles } from './index';
  import ArticleCard from '../components/ArticleCard.vue';
  import SearchInput from '../components/SearchInput.vue';
  import EasterEggHint from '../components/EasterEggHint.vue';

  defineOptions({
    name: 'BlogArticlesPage',
  });

  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

  const {
    pageRef,
    showEasterEgg,
    searchQuery,
    activeCategory,
    currentPage,
    pageSize,
    categories,
    paginatedArticles,
    totalArticles,
    handleKeydown,
    setActiveCategory,
    handleSearch,
    viewArticle,
    handlePageChange,
    getCategoryColor,
    loading,
  } = useBlogArticles();
</script>

<style scoped lang="scss">
  @use '../css/blog.scss' as *;

  /* 分类筛选 */
  .category-filter {
    margin-bottom: 3.5rem;
  }

  .filter-tabs {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
  }

  .filter-tab {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 28px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: auto !important;
    padding: 0.9rem 1.8rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }

  .filter-tab:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(24, 144, 255, 0.4) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }

  .filter-tab.ant-btn-primary {
    background: linear-gradient(135deg, #1890ff, #52c41a) !important;
    border-color: transparent !important;
    color: white !important;
    box-shadow: 0 6px 20px rgba(24, 144, 255, 0.4) !important;
    transform: translateY(-2px);
  }

  .tab-badge {
    background: transparent !important;
    color: inherit !important;
  }

  .tab-badge :deep(.ant-badge-count) {
    color: inherit !important;
    border: none !important;
    font-weight: 600;
  }

  /* 文章列表 */
  .articles-container {
    margin-bottom: 3rem;
  }

  .articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .articles-grid {
      grid-template-columns: 1fr;
      gap: 1.2rem;
      padding: 0 1rem;
    }

    .filter-tabs {
      gap: 0.8rem;
      padding: 0 1rem;
    }

    .filter-tab {
      padding: 0.7rem 1.4rem !important;
      font-size: 0.9rem;
    }
  }

  /* 空状态暗色适配 */
  .custom-empty-dark {
    ::v-deep .ant-empty-description {
      color: #bfc9d1 !important;
      font-size: 1.08rem;
      font-weight: 500;
      letter-spacing: 0.2px;
    }
    ::v-deep .ant-empty-image {
      filter: brightness(0.7) grayscale(0.2);
      opacity: 0.85;
    }
  }

  /* 页面加载样式 */
  .page-loading {
    width: 100%;
    min-height: 100vh;
  }

  .page-loading :deep(.ant-spin-container) {
    width: 100%;
  }

  .page-loading :deep(.ant-spin) {
    max-height: none;
  }
</style>
